<template>
  <el-container class="home_container">
    <el-header>
      <div>
        <img src="../assets/logo.png" alt="" />
        <span>DoLo-Boot Pro</span>
      </div>

      <el-button type="primary" size="medium" @click="logout">退出</el-button>
      <el-dialog
        title="提示"
        :visible="dialogVisible"
        width="30%"
        show-close
        close-on-press-escape
      >
        <span>确定要退出吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="reallylogout">确 定</el-button>
        </span>
      </el-dialog>
    </el-header>
    <el-container>
      <!--侧边栏 -->
      <el-aside :width="collapsed ? '64px' : '200px'">
        <div style="width: 200px" class="asideserchy">
          <a-button type="info" @click="toggleCollapsed" class="asidebtn">
            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
          </a-button>
          <a-menu
            mode="inline"
            :default-selected-keys="['111']"
            :inline-collapsed="collapsed"
            @click="menuClick"
          >
            <a-menu-item key="111">
              <a-icon type="pie-chart" />
              <span>首页</span>
            </a-menu-item>
            <a-sub-menu key="sub1">
              <span slot="title">
                <a-icon type="desktop" />
                <span>综合管理</span>
              </span>
              <a-menu-item key="stuManger"> 学生管理 </a-menu-item>
              <a-menu-item key="3"> Option 6 </a-menu-item>
              <a-menu-item key="4"> Option 7 </a-menu-item>
              <a-menu-item key="5"> Option 8 </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title">
                <a-icon type="inbox" />
                <span>Option 3</span>
              </span>
              <a-menu-item key="6"> Option 5 </a-menu-item>
              <a-menu-item key="7"> Option 6 </a-menu-item>
              <a-menu-item key="8"> Option 7 </a-menu-item>
              <a-menu-item key="9"> Option 8 </a-menu-item>
            </a-sub-menu>

            <a-sub-menu key="sub3">
              <span slot="title"
                ><a-icon type="mail" /><span>Navigation One</span></span
              >
              <a-menu-item key="10"> Option 5 </a-menu-item>
              <a-menu-item key="11"> Option 6 </a-menu-item>
              <a-menu-item key="12"> Option 7 </a-menu-item>
              <a-menu-item key="13"> Option 8 </a-menu-item>
            </a-sub-menu>

            <a-sub-menu key="sub4">
              <span slot="title"
                ><a-icon type="appstore" /><span>Navigation Two</span></span
              >
              <a-menu-item key="14"> Option 9 </a-menu-item>
              <a-menu-item key="15"> Option 10 </a-menu-item>
              <a-sub-menu key="sub5" title="Submenu">
                <a-menu-item key="16"> Option 11 </a-menu-item>
                <a-menu-item key="17"> Option 12 </a-menu-item>
              </a-sub-menu>
            </a-sub-menu>
          </a-menu>
        </div>
      </el-aside>
      <el-main>
        <router-view> </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      collapsed: false,
    };
  },
  methods: {
    logout() {
      this.dialogVisible = true;

      // this.$router.push("/login");
    },
    reallylogout() {
      this.dialogVisible = false;
      this.$router.push("/login");
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    menuClick({ key, keyPath }) {
      console.log(key);
      this.$router.push("/" + key);
    },
  },
};
</script>


<style lang="less" scoped>
.el-header {
  background-color: #1890ff;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 25px;
    }
  }
}
.el-aside {
  background-color: #fff;
}
.em-main {
  background-color: #fff;
}
.home_container {
  height: 100%;
}
.asidebtn {
  width: 60px;
  margin-top: 5px;
}
</style>